<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>温度计判断</title>
    <script crossorigin src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script crossorigin src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script crossorigin src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

  <div id = 'example'></div>
  <script type="text/babel">



      function BoilingVerdict(props){
          if(props.wendu >= 100){
              return (<p>输入温度是：{props.wendu} 这是沸腾的开水</p>);
          }else {
              return( <p>输入温度是：{props.wendu} 这个冷水</p>);
          }
      }

      //温度输入框
      class CalculatorInput extends React.Component{
          constructor(props) {
              super(props);
              this.state = {
                  temperature : ''
              };
          }

          handleTemperatureChange(event){
            this.setState({
                temperature : event.target.value
            });
          }
          render(){
              const  temperature = this.state.temperature;
              return(
                   <fieldset>
                      <legend>请输入当前温度:</legend>
                       <input value= {temperature}
                       onChange={this.handleTemperatureChange.bind(this)}/>
                       <label>摄氏度</label>
                       <BoilingVerdict wendu = {temperature} />


                   </fieldset>
              );
          }

      }




      //要将React元素呈现到根DOM节点，请将两者都传递给ReactDOM.render()
      ReactDOM.render(
          <CalculatorInput/>,
          document.getElementById('example')
      );


  </script>





</body>
</html>